import React from 'react'
import {Avatar, Card, InputNumber, Popconfirm, Select, Table} from 'antd'
import {Button} from "antd/lib/index"
import {EditableCell, EditableFormRow} from 'components/Editable'
import styles from '../index.less'

const {Option} = Select

class ProductInfo extends React.Component {

  constructor (props) {
    super(props)
  }

  render () {
    const {
      handleChange,
      amount,
      dataSource,
      handleDelete,
      showModal,
      current,
      form: {
        getFieldDecorator,
      },
    } = this.props

    const components = {
      body: {
        row: EditableFormRow,
        cell: EditableCell,
      },
    }

    // const speces = [
    //   {id: 1, name: '箱(6瓶)', num: 6, price: 1699},
    //   {id: 2, name: '瓶', num: 1, price: 328},
    // ]

    const columns = [{
      title: '编号',
      dataIndex: 'sn',
    }, {
      title: '图片',
      dataIndex: 'goodsImg',
      key: 'goodsImg',
      render: val => {
        return val ? <Avatar src={val} size="large"/> : '暂无图片'
      },
    }, {
      title: '名称',
      dataIndex: 'goodsName',
      key: 'goodsName',
    }, {
      title: '品牌',
      dataIndex: 'brandName',
      key: 'brandName',
    // }, {
    //   title: '规格',
    //   dataIndex: 'spec',
    //   width: 100,
    //   render: (val) => getFieldDecorator('spec', {initialValue: val})(
    //     <Select placeholder={'请选择'} allowClear>
    //       {speces.map(item => <Option value={item.id}>{item.name}</Option>)}
    //     </Select>,
    //   ),
    }, {
      title: '单价(RMB)',
      dataIndex: 'salePrice',
      key: 'salePrice',
      width: 100,
      render: (val, record) => <InputNumber value={val} onChange={val => handleChange(1, val, record)} placeholder="商品单价"/>,
    }, {
      title: '数量',
      dataIndex: 'num',
      width: 100,
      render: (val, record) => <InputNumber value={val} onChange={val => handleChange(2, val, record)} placeholder="商品数量"/>,
    }, {
      title: '折扣',
      dataIndex: 'discount',
      width: 100,
      render: (val, record) => <InputNumber value={val} onChange={val => handleChange(3, val, record)} placeholder="商品折扣"/>,
    }, {
      title: '金额小计',
      dataIndex: 'amount',
      render: val => '￥' + (val ? val : '0.00'),
    }, {
      title: '仓库',
      dataIndex: 'depotName',
    }, {
      title: '库存',
      dataIndex: 'stockNum',
    }, {
      title: '操作',
      dataIndex: 'operation',
      render: (text, record) => (
        <Popconfirm title="确定要删除该商品吗？" onConfirm={() => handleDelete(record.id)}>
          <Button type="dashed" shape="circle" icon="minus"/>
        </Popconfirm>
      ),
    }]

    return (
      <Card title={'商品信息'} style={{width: '100%'}}>
        <Button onClick={showModal} type="primary" style={{marginBottom: 16}}>
          添加商品
        </Button>
        <Table
          components={components}
          rowClassName={styles["editable-row"]}
          dataSource={dataSource}
          columns={columns}
          pagination={false}
          size="middle"
        />
      </Card>
    )
  }
}

export default ProductInfo
